<!-- 
批量操作
-->
<script setup>
// vue 相关
import { onMounted, ref } from "vue";
// 组件
import navBack from './navBack.vue'
import Draggable from "vuedraggable";
    // 预览视频
import PreviewModal from '@/components/previewModal/index.vue'
    // 视频预览弹窗开关
    const visibleImage = ref(false)
    // 视频预览src
    const videoSrc = ref('')
    // 打开视频预览并给src赋值
    const openPreviewModal = (src)=>{
        videoSrc.value = src;
        visibleImage.value = true;
    }
    // 选择素材
import ChooseMaterial from "@/views/shotstack/EditingCenter/modules/bottomSet/components/chooseMaterial.vue";
    // 选择素材开关
    const addVisible = ref(false);
    // 选择的文件
    const cancel = (data) =>{
        console.log('选择的文件',data);
        importId.value && (() =>{
           const index = materialList.value.findIndex(item => item.id === importId.value)
           if(index !== -1){
            data?.material_url && ( materialList.value[index].src = data.material_url);
            }
        })()
        importId.value = '';
        addVisible.value = false;
    }
    // 当前点击的id
    const importId = ref('');
    // 点击素材库导入打开素材弹窗
    const openChooseMaterial = (id)=>{
    importId.value = id;
    addVisible.value = true;
    }

// 路由
import { useRouter } from "vue-router";
// icon
import {
PlayCircleFilled,
PlusOutlined,
HolderOutlined,
CloudDownloadOutlined,
CloudUploadOutlined,
MoreOutlined
} from '@ant-design/icons-vue';
// 工具
import utils from "@/common/utils/utils";
const router = useRouter();
// emit 组件通信
const emit = defineEmits(["changeIsShowtemplate"]);

// 添加素材模拟数据
const materialList = ref([
    {
        id:"1",
        num:1,
        src:'',
        time:'2.04s'
    },
    {
        id:"2",
        num:2,
        src:'',
        time:'4.04s'
    },
    {
        id:"3",
        num:3,
        src:'',
        time:'6.04s'
    },
    {
        id:"4",
        num:4,
        src:'',
        time:'8.04s'
    },
    {
        id:"5",
        num:5,
        src:'',
        time:'10.04s'
    },
    {
        id:"6",
        num:6,
        src:'',
        time:'12.04s'
    },
    {
        id:"7",
        num:7,
        src:'',
        time:'14.04s'
    },
    {
        id:"8",
        num:8,
        src:'',
        time:'16.04s'
    },
    {
        id:"9",
        num:9,
        src:'',
        time:'18.04s'
    },
    {
        id:"10",
        num:10,
        src:'',
        time:'20.04s'
    },
])

// 滚动条容器
const video_content = ref(null);

//  判断当前滚动条是否在最边缘位置, 用来开启白色遮罩
const hiddenMask = ref('');
const checkScrollPosition = () => {
if (!video_content.value) return;
const element = video_content.value;
const maxScrollLeft = element.scrollWidth - element.clientWidth;
// 判断最左边
if (element.scrollLeft === 0) {
    console.log('最左边');
    hiddenMask.value='left'
// 判断最右边
}else if(element.scrollLeft >= maxScrollLeft) {
hiddenMask.value='right'
    console.log('最右边');
}else{
hiddenMask.value=''
}
};
// 节流检测滚动条位置函数
const throttlingFn = utils.throttling(200,checkScrollPosition);

// 素材库导入hover展示内容
const hoverShowIte = ref(null)

// 视频项右上角按钮点击 开启和关闭pop
const popVisible = ref(false)

// 保存改动并关闭页面
const saveAndBack = () =>{
    emit('changeIsShowtemplate')
}

onMounted(() =>{
// 初始调用检测滚动条位置
throttlingFn()
})
</script>

<template>
<div class="TemplateBatchOperation">
<!-- 头部 -->
<navBack 
@backClick="emit('changeIsShowtemplate')"
:left-config="{
    isShow:true,
    title:''
}"></navBack>
<!-- 主体内容 -->
<div class="TemplateBatchOperation_content">
    <div class="video_content_box">
        <!-- 头部标题 -->
        <div class="header_box">
            <h1>请为素材排序</h1>
            <sapn>素材顺序对应模板槽位展示顺序</sapn>
        </div>
        <!-- 遮罩 -->
        <transition name="fade">
            <div class="mask_box_left mask" v-show="hiddenMask !== 'left'"></div>
        </transition>
        <transition name="fade">
            <div class="mask_box_right mask" v-show="hiddenMask !== 'right'"></div>
        </transition>
        <!-- 视频内容 -->
        <div class="video_content"  @scroll="throttlingFn" ref="video_content">
            <!-- 时间条容器 -->
            <div class="time_box">
                <div class="time_shade"> </div>
                <div class="time_item" v-for="(item,index) in materialList" :key="item.id">
                    <PlayCircleFilled style="font-size: 19px; color: #898d91;"/>
                    <span style="margin-left: 2px;">{{ item.time }}</span>
                    <div class="item_line" v-if="index !== materialList.length-1"></div>
                </div>
            </div>
            <!-- 预览槽位视频 -->
            <div class="video_preview_slot"  style="margin-bottom: 36px;" >
                <div class="video_preview_title">
                    <h2 style="font-size: 16px; font-weight: 600;">预览槽位视频</h2>
                </div>
                <div class="video_preview_content">
                    <div class="video_preview_item" v-for="item in materialList" :key="item">
                        <div class="video_preview_item_img" @click="visibleImage = true">
                            <img src="https://img2.baidu.com/it/u=3519583267,2152550365&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=666" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <!-- 添加的素材 -->
            <div class="video_preview_slot">
                <div class="video_preview_title">
                    <h2 style="font-size: 16px; font-weight: 600;">添加的素材</h2>
                </div>
                    <Draggable 
                    :animation="200"
                    class="video_preview_content" 
                    v-model="materialList" 
                    key="id"
                    :forceFallback="true"
                    :scrollSensitivity="200"
                    :scrollSpeed="20"
                    handle=".tongs"
                    >
                    <!-- @dragstart="handleDragStart" -->
                    <template #item="{element}">
                        <div class="video_preview_item video_add_item" 
                        @mouseenter="hoverShowIte = element.id"
                        @mouseleave="hoverShowIte = null"
                        >
                        <div class="operation_item">
                                <div class="tongs">
                                    <HolderOutlined />
                                </div>
                                <div class="operation_item_content">
                                    <!-- 添加图标 -->
                                    <template v-if="!element.src">
                                        <div class="add_icon_box"  v-show="hoverShowIte !== element.id">
                                            <PlusOutlined />
                                            {{ element.num }}
                                        </div>
                                        <!-- 鼠标移入展示内容 -->
                                        <div class="operation_item_hover" v-show="hoverShowIte == element.id">
                                            <div class="material_import" @click="openChooseMaterial(element.id)">
                                                <cu-icon type="icon-xiazaidaoru"></cu-icon>
                                                素材库导入
                                            </div>
                                            <div class="split_line"></div>
                                            <div class="upload_text">
                                                <CloudUploadOutlined />
                                                上传
                                            </div>
                                            {{ element.src }}
                                        </div>
                                    </template>
                                    <template v-else>
                                        <!-- 有视频的项, 右上角的操作按钮 -->
                                        <a-popover 
                                        v-model:visible="popVisible"  
                                        placement="bottomLeft" trigger="click" 
                                        :getPopupContainer=" triggerNode => {
                                                    return triggerNode.closest('.video_content_box')
                                                }">
                                                <template #content>
                                                    <div class="item_select" @click="addVisible = true">
                                                        {{ '从素材库替换素材' }}
                                                    </div>
                                                    <div class="item_select" >
                                                        {{ '从本地替换素材' }}
                                                    </div>
                                                    <div class="item_select item_select_del" >
                                                        {{ '删除' }}
                                                    </div>
                                                </template>
                                                <div class="operating_button" @click="popVisible = true">
                                                    <MoreOutlined />
                                                </div>
                                        </a-popover>
                                            <div class="video_preview_item_img haveVideoSrc" style="position: relative;" @click="visibleImage = true">
                                                <video style="width: 100%; height: 100%;" :src="element.src" @click="openPreviewModal(element.src)"></video>
                                            </div>
                                    </template>
                                </div>
                            </div>
                        </div>
                </template>
                </Draggable>
            </div>
        </div>

        <div class="bottom_btn_box">
            <a-popover 
            v-model:visible="popVisible"  
            placement="bottomLeft" trigger="click" 
            :getPopupContainer=" triggerNode => {
                        return triggerNode.closest('.video_content_box')
                    }">
                    <template #content>
                    <div class="propover_content">
                            <a-radio-group  v-model:value="radioGroupVal" name="radioGroup">
                                <a-radio value="1" style="padding: 0;">素材库导入</a-radio>
                                <a-radio value="2" style="padding: 0;" >本地上传</a-radio>
                            </a-radio-group>
                            <div class="btn_box">
                                <a-button class="cancel_btn">取消</a-button>
                                <a-button class="confirm_btn" type="primary" @click="uplodFile">确定</a-button>
                            </div>
                        </div>
                    </template>
                    <a-button type="default" size="" >添加素材</a-button>
            </a-popover>
            <a-button type="default" size="">一键清除素材</a-button>
            <a-button type="primary" size="" @click="saveAndBack">完成排序，进入模板使用界面</a-button>
        </div>
        
    </div>
</div>

    <!-- 预览视频弹窗 -->
    <PreviewModal 
    :visible="visibleImage"
    @onCancel="visibleImage = false"
    :url="videoSrc || 'https://muse.console.volcengine.com/api/storage/objects/media/7267512038459588664_transcode_video_mp4_540p_h264.mp4?infer_mime=ext&x-muse-token=ChYIARABGOje%2BK8GIOiB%2Fq8GKgQxMzkwEqYBCg4Iv4CO9KzG%2Bf1lENajBBINCgt2b2xjX2VuZ2luZRoCGAIiCAoCbHESAmNuKgYI2jQQhgMyKQoneyJiaXpfaWQiOiIxMDAwMDAwMDEiLCJkZXJpdmVkX3VpZCI6IiJ9QhQKEmljYXJjaC5pYW0uYXV0aHJwY0ouL2FwaS9zdG9yYWdlL29iamVjdHMvbWVkaWEvNzI2NzUxMjAzODQ1OTU4ODY2NBrYAmZKbWk0N1IyaXpSb0FRam9yNW5vNFM2QjNiSXJ1N1hVNFFjaXRmZENOdUVHbVRXNGd6ZEYrSy81NHExbVJZSEpXSnhaeHdOVFB1NC9nLzJEWU5BWDRmNjlrYWltRk5EU2VVNXZqUGFFYWlMNy9xNGlCMWE5ekRvL1Z2VFcxQzVPalhKRFNOajhOai8wdy8xcmZxaDMvalcyUmFaNHdRbzJvVUVlOEcvMkVISnJGZ0Rod1ExRUw1UU1ZclA0TjV0MzhBN1VwbWs4TThnUGJBMlFrT1d2NXpyWGMxc0RqdE9ISktZcitkM2lsc3B0dkZvbURVaUROZE5teU5zdmpEdis0T0lnMFM0YlVibitTQXU2YWwvb1JzNStyOC9DL2N5SWJ2TE1Nd3JsWk1mQmJlVFJwQmFCTlR0NGNEMHRYS0E3aU9BWEdIc1pLTmpIS1o5Nm0zUEdPdz09'"
    :title="'视频预览'"
    :type="'video'"
    />
    <!-- 选择素材 -->
    <ChooseMaterial :isClip="false" material_type="video" :multiple="false"  :visible="addVisible" @close="cancel" />
</div>
</template>

<style lang="less" scoped>

/* 定义进入和离开的过渡状态 */
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
/* 初始状态为透明且不可见 */
.fade-enter-from, .fade-leave-to {
opacity: 0;
display: none;
}
/* 进入结束和离开开始的状态 */
.fade-enter-to, .fade-leave-from {
opacity: 1;
display: block;
}
/* 当元素处于过渡中，在过渡结束前，元素仍然是可见的 */
.fade-leave-active {
display: block;
}

:deep(.ant-btn){
    border-radius: 6px;
}

.TemplateBatchOperation{
width: 100%;
height: 100%;
.TemplateBatchOperation_content{
    padding-top: 37px;
    .video_content_box{
        width: 1200px;
        overflow: auto;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        // 气泡框样式
        // 去除外层padding
        :deep(.ant-popover-inner-content){
            padding: 0 !important;
            }
            // 内容容器圆角边框
            :deep(.ant-popover-inner){
                border-radius: 6px !important;
                overflow: hidden;
            }
            // 去除小尖尖
            :deep(.ant-popover-arrow-content){
                display: none;
            }
            // 整体位置
            :deep(.ant-popover-placement-bottomRight){
                top: 43px !important;
            }
            // 气泡框内选择元素的样式
            .item_select{
                padding: 8px 16px;
                // max-width: 280px;
                min-width: 145px;
                // text-align: center;
                cursor: pointer;
                font-size: 14px;
                &:hover{
                        background-color: #eceded;
                    }
                &.item_select_del{
                    color: #ff4d4f;
                    border-top: 1px solid #e8e8e8;
                }
            }
            .propover_content{
                // 气泡框内部的按钮
                padding: 24px;
                .btn_box{
                    display: flex;
                    justify-content: end;
                    margin-top: 24px;
                    gap:8px;
                }
            }


        // 头部标题
        .header_box{
            text-align: center;
            & h1{
                font-weight: 700;
                margin-bottom: 5px;
            }
        }

        // 底部按钮
        .bottom_btn_box{
            display: flex;
            justify-content: center;
            align-items: center;
            gap:10px;
            margin-top: 53px;
        }   

            // 遮罩层
            .mask{
                position: absolute;
                height: 325px;
                width: 96px;
                background: linear-gradient(270deg, #fff, hsla(0, 0%, 100%, 0));
                z-index: 99;
                pointer-events: none;
                }
                .mask_box_left{
                    top: 72px;
                    left: 104px;
                    transform: rotate(180deg);
                }
                .mask_box_right{
                    top: 72px;
                    right: 0;
                }

        .video_content{
            width: 1200px;
            // position: relative;
            overflow-x: auto;
            padding-bottom:10px ;
            &:hover{
                    &::-webkit-scrollbar {
                        display: block;
                    }
                    padding-bottom: 0;
                }
                &::-webkit-scrollbar {
                    width: 8px; /* 滚动条的宽度 */
                    height: 10px; /* 滚动条的高度，垂直滚动条可能用得上 */
                    display: none;
                }
                &::-webkit-scrollbar-thumb {
                    background: #888; /* 滑块的背景颜色 */
                    border-radius: 10px; /* 滑块的圆角 */
                }
            .video_preview_slot{
                width: 100%;
                display: flex;
                position: relative;
            
                // 标题
                .video_preview_title{
                    width: 80px;
                    height: 86px;
                    display: flex;
                    align-items: center;
                    text-align: center;
                    padding-right: 24px;
                    box-sizing: content-box;
                    position: sticky;
                    top: 0;
                    left: 0;
                    z-index: 99;
                    background-color: #fff;
                    flex-shrink: 0;
                }
                // 盛放视频的容器
                .video_preview_content{
                    display: flex;
                    box-sizing: border-box;
                    position: relative;
                    padding-bottom: 10px;
                    .video_preview_item{
                        position: relative;
                        height: 86px;
                        width: 153px;
                        margin-right: 10px;
                        flex-shrink: 0;
                        background-color: #e6e8ea;
                        border-radius: 5px;
                        cursor: pointer;
                        .video_preview_item_img{
                            width: 100% ;
                            height: 100%;
                            border-radius: 5px;
                            overflow: hidden;
                            &:hover{
                                &::after{
                                    opacity: 1;
                                }
                                box-shadow: 0 4px 6px rgba(206, 206, 206, 0.8); /* 柔和的粉红色阴影 */
                            }
                            &::after{
                                content:'点击查看';
                                opacity: 0;
                                transition: opacity 0.2s;
                                position: absolute;
                                left: 50%;
                                top: 50%;
                                transform: translate(-50%, -50%);
                                color: #fff;
                                font-size: 12px;
                                font-weight: 600;
                            }
                        img{
                            height: 100%;
                            width: 100%;
                            object-fit: contain;
                        }
                    }

                        }
                    // 添加素材样式
                    .video_add_item{
                        display: flex;
                        
                        // 添加素材的每一项
                        .operation_item{
                            flex: 1;
                            position: relative;
                            // 抓手
                            .tongs{ 
                                cursor: pointer;
                                height: 100%;
                                width: 26px;
                                background-color: rgba(0, 0, 0, .5);
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                color: #fff;
                                font-size: 23px;
                                position: absolute;
                                left: 0;
                                top: 0;
                                z-index: 10;
                            }
                            .operation_item_content{
                                height: 100%;
                                width: 100%;
                                position: relative;



                                &:hover{
                                    .operating_button{
                                        opacity: 1;
                                    }
                                }

                            // 添加的预览项的操作按钮
                                .operating_button{
                                    position: absolute;
                                    width: 32px;
                                    height: 32px;
                                    background-color: #f3f4f4;
                                    top: -32px;
                                    right: 0;
                                    opacity: 0;
                                    text-align: center;
                                    line-height: 32px;
                                    border-radius: 3px;
                                }

                                
                                // 鼠标触摸的样式
                                .operation_item_hover{
                                    height: 100%;
                                    width: 100%;
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    justify-content: space-evenly;
                                    padding-left: 26px;
                                    // 中间的线条
                                    .split_line{
                                        height: 1px;    
                                        width: 90%;
                                        background-color: #d6d8db;     
                                    }
                                    // 素材导入文字
                                    .material_import{
                                        cursor: pointer;
                                        font-weight: 600;
                                        font-size: 12px;
                                        &:hover{
                                            color: #1664ff;
                                        }
                                    }
                                    .upload_text{
                                        font-size: 12px;
                                        cursor: pointer;
                                        font-weight: 600;
                                        &:hover{
                                            color: #1664ff;
                                        }
                                    }
                                }
                                // 添加素材的图标
                                .add_icon_box{
                                    width: 100%;
                                    height: 100%;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    font-size: 32px;
                                    color: #6b7075;
                                    padding-left: 26px;
                                }
                            }
                        }
                    }
                }
            }

            // 时间线
            .time_box{
                margin: 52px 0 32px 0;
                display: flex;
                // 时间容器的遮罩
                .time_shade{
                    height: 22px;
                    min-width: 104px;
                    background-color: #fff;
                    position: sticky;
                    top: 0;
                    left: 0;
                    z-index: 100;
                }
                .time_item{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 7px;
                    font-size: 14px;
                    .item_line{
                        width: 80px;
                        height: 1px;
                        background-color: #e4e4e5;
                        margin: 0 10px 0 7px;
                    }
                }

            }
        }
    }


}
}
</style>